﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="stable/static/css/site.css" rel="stylesheet" type="text/css">
    <link href="stable/static/css/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="stable/static/css/prettify.css" rel="stylesheet" type="text/css">
    <link href="//www.google.com/images/icons/product/chrome-16.png" rel="icon" type="image/ico">
    <title>教程: 入门 (Hello, World!) - chrome插件中文开发文档(非官方)</title>
  </head>
  <body>
    <a id="top"></a>
    <div id="header">{Header content}</div>
    <a id="gc-topnav-anchor"></a>
    <div id="gc-topnav">
      <h1>chrome插件中文开发文档(非官方)</h1>
      <ul id="home" class="gc-topnav-tabs">
        <li id="home_link">
          <a href="index.html" title="Google Chrome Extensions home page"><div>主页</div></a>
        </li>
        <li id="docs_link">
          <a href="docs.html" title="Official Google Chrome Extensions documentation"><div>文档</div></a>
        </li>
        <li id="faq_link">
          <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions"><div>常见问题</div></a>
        </li>
        <li id="samples_link">
          <a href="samples.html" title="Sample Extensions (with source code)"><div>示例</div></a>
        </li>
        <li id="group_link">
          <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum"><div>google群组(英文)</div></a>
        </li>
        <li id="so_link">
          <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension" title="[google-chrome-extension] tag on Stack Overflow"><div>还有问题?(英文)</div></a>
        </li>
      </ul>
    </div>
    <div id="gc-container">
      <div id="gc-sidebar">
        <ul 
            class="level1 ">
          <li class="level2">
                <a href="getstarted.html" class="level2 ">入门</a>
          </li>
          <li class="level2">
                <a href="overview.html" class="level2 ">概述</a>
          </li>
          <li class="level2">
                <a href="whats_new.html" class="level2 ">新功能</a>
          </li>
          <li class="level2">
                <a href="devguide.html" class="level2 ">开发者指南</a>
              <ul 
                  class="level2 ">
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">用户界面</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="browserAction.html" class="level4 ">浏览器按钮</a>
                      </li>
                      <li class="level4">
                            <a href="contextMenus.html" class="level4 ">右键菜单</a>
                      </li>
                      <li class="level4">
                            <a href="notifications.html" class="level4 ">桌面通知</a>
                      </li>
                      <li class="level4">
                            <a href="omnibox.html" class="level4 ">多功能地址栏</a>
                      </li>
                      <li class="level4">
                            <a href="options.html" class="level4 ">选项页面</a>
                      </li>
                      <li class="level4">
                            <a href="override.html" class="level4 ">代替页面</a>
                      </li>
                      <li class="level4">
                            <a href="pageAction.html" class="level4 ">页面按钮</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">浏览器交互</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="bookmarks.html" class="level4 ">书签</a>
                      </li>
                      <li class="level4">
                            <a href="cookies.html" class="level4 ">Cookies</a>
                      </li>
                      <li class="level4">
                            <a href="devtools.html" class="level4 ">开发人员工具</a>
                      </li>
                      <li class="level4">
                            <a href="events.html" class="level4 ">事件</a>
                      </li>
                      <li class="level4">
                            <a href="history.html" class="level4 ">历史记录</a>
                      </li>
                      <li class="level4">
                            <a href="management.html" class="level4 ">管理</a>
                      </li>
                      <li class="level4">
                            <a href="tabs.html" class="level4 ">标签页</a>
                      </li>
                      <li class="level4">
                            <a href="windows.html" class="level4 ">窗口</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">实现</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="a11y.html" class="level4 ">辅助功能</a>
                      </li>
                      <li class="level4">
                            <a href="event_pages.html" class="level4 ">事件页面</a>
                      </li>
                      <li class="level4">
                            <a href="contentSecurityPolicy.html" class="level4 ">内容安全策略(CSP)</a>
                      </li>
                      <li class="level4">
                            <a href="content_scripts.html" class="level4 ">内容脚本</a>
                      </li>
                      <li class="level4">
                            <a href="xhr.html" class="level4 ">跨站XMLHttpRequest</a>
                      </li>
                      <li class="level4">
                            <a href="i18n.html" class="level4 ">国际化</a>
                      </li>
                      <li class="level4">
                            <a href="messaging.html" class="level4 ">消息传递</a>
                      </li>
                      <li class="level4">
                            <a href="permissions.html" class="level4 ">可选权限</a>
                      </li>
                      <li class="level4">
                            <a href="npapi.html" class="level4 ">NPAPI插件</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">完成</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="hosting.html" class="level4 ">托管</a>
                      </li>
                      <li class="level4">
                            <a href="external_extensions.html" class="level4 ">其他部署方案</a>
                      </li>
                    </ul>
                </li>
              </ul>
          </li>
          <li class="level2">
                <a href="tutorials.html" class="level2 ">教程</a>
              <ul 
                  class="level2 ">
                <li class="level3">
                      <a href="tut_migration_to_manifest_v2.html" class="level3 ">清单文件V2</a>
                </li>
                <li class="level3">
                      <a href="tut_debugging.html" class="level3 ">调试</a>
                </li>
                <li class="level3">
                      <a href="tut_analytics.html" class="level3 ">Google Analytics(分析)</a>
                </li>
                <li class="level3">
                      <a href="tut_oauth.html" class="level3 ">OAuth</a>
                </li>
              </ul>
          </li>
          <li class="level2">
                <span class="level2">参考</span>
              <ul 
                  class="level2 ">
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">格式</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="manifest.html" class="level4 ">清单文件</a>
                      </li>
                      <li class="level4">
                            <a href="match_patterns.html" class="level4 ">匹配表达式</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                      <a href="permission_warnings.html" class="level3 ">权限警告</a>
                </li>
                <li class="level3">
                      <a href="api_index.html" class="level3 ">chrome.* APIs</a>
                </li>
                <li class="level3">
                      <a href="api_other.html" class="level3 ">其他APIs</a>
                </li>
              </ul>
          </li>
          <li class="level2">
                <span class="level2">更多</span>
              <ul 
                  class="level2 ">
                <li class="level3">
                      <a href="http://code.google.com/chrome/webstore/docs/index.html" class="level3 ">chrome商店</a>
                </li>
                <li class="level3">
                      <a href="http://code.google.com/chrome/apps/docs/developers_guide.html" class="level3 ">托管应用程序</a>
                </li>
                <li class="level3">
                      <a href="themes.html" class="level3 ">主题</a>
                </li>
              </ul>
          </li>
        </ul>
      </div>
      <div id="gc-pagecontent">
        <h1 class="page_title">教程:入门 (Hello, World!)</h1>
        <div id="toc">
          <h2>内容</h2>
          <ol>
            <li>
              <a href=#load>创建和载入插件</a>
            </li>
            <li>
              <a href=#code>添加代码</a>
            </li>
            <li>
              <a href=#summary>现在做什么?</a>
            </li>
          </ol>
        </div>




<p>
  这个教程将带你创建一个简单的扩展.你将会添加一个点击时显示一个自动生成的页面的图标在chrome上图标和页面看起来会是这样：
</p>

<img src="stable/static/images/hello-world-small.png"
     width="300"
     height="221"
     alt="a window with a grid of images related to 'Hello World'">

<p>
  你可以使用任何已发布版本的chrome开发扩展，在windows上，Mac或者Linux。
  你开发的扩展在任何chrome支持的平台上运行都不会有任何变化。
</p>

<h2 id="load">创建和载入插件</h2>

<p>
  这个插件我们将创建一个
  <a href="browserAction.html">浏览器按钮</a>,它添加一个你可以控制其行为的按钮在chrome工具栏上
</p>

<ol>
  <li>
    在你电脑上某个地方创建一个文件夹来包含所有扩展程序代码。
  </li>
  <li>
    <p>
      在你的扩展文件夹中, 创建一个名为
      <strong><code>manifest.json</code></strong>的文本文件, 将下面的代码保存进去:
    </p>
    <pre>{
  "name": "我的第一个扩展程序",
  "version": "1.0",
  "manifest_version": 2,
  "description": "第一个由我开发的扩展",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}</pre>
  </li>
  <li>
    <p>保存这个图标到插件目录下:</p>
    <div style="width: 150px; text-align: center;">
      <a href='stable/static/images/icon.png'
         download='icon.png'>
        <img src='stable/static/images/icon.png'
             width='19'
             height='19'
             alt=''
             style='display: block; margin: 0.25em auto;'>
        下载 icon.png
      </a>
    </div>
  </li>
  <li id="load-ext">
    <p>载入插件。</p>
    <ol type="a">
      <li style="margin-top:0" />
        单击多功能框最右边的按钮
      <img src="stable/static/images/toolsmenu.gif" width="29" height="29" alt=""
        style="margin-top:0" />
      并选择 <b>工具 > 扩展程序</b>来打开插件管理页面。
      </li>

      <li>
      确保右上角<b>开发者模式</b>复选框已选中。
      </li>

      <li>
      单击 <b>载入正在开发的扩展程序...</b>，弹出文件选择对话框。
      </li>

      <li>
      浏览至您的扩展程序文件所在的目录，并选择<b>确定</b>.
      </li>
    </ol> </li>
  </ol>

<p>
如果扩展程序有效的话，它将被载入并且立刻处于活动状态！如果无效的话，页面顶部将显示错误消息，纠正错误再重试。
</p>

<p>
<a href="stable/static/images/load_after.png"><img
  src="stable/static/images/load_after_small.png"
  width="300" height="132" /></a>
</p>

<h2 id="code">添加代码</h2>
<p>
  在这个步骤中，你将会让你的插件做一些看起来不错的事情
</p>

<ol>
  <li>
    <p>编辑<code>manifest.json</code> 来添加下面的代码:</p>
    <pre>...
  "browser_action": {
    "default_icon": "icon.png"<b>,
    "default_popup": "popup.html"</b>
  },
  ...</pre>

    <p>
      在你的插件目录中, 创建后面两个文件
      <strong><code>popup.html</code></strong> 和
      <strong><code>popup.js</code></strong>. 添加下面的代码到文件中:
    </p>
    <blockquote>
      <a href="examples/tutorials/getstarted/popup.html" download="popup.html">
        HTML code (popup.html)</a> and
      <a href="examples/tutorials/getstarted/popup.js" download="popup.js">
        JavaScript code (popup.js)</a> for hello_world</a> </blockquote>
  </li>
  <li>
    返回到扩展管理页面,点击<b>重新加载</b>按钮
    来加载新版本的扩展。</li>
  <li>点击插件图标.
  一个显示
  <code>popup.html</code>内容的弹出窗口将会出现. </li>
</ol>
<p> 它看起来应该是这样:</p>

<img src="stable/static/images/hello-world.png"
  width="500" height="369"
  alt="a popup with a grid of images related to HELLO WORLD" />

<p> 如果你没看到弹出窗口,
试着再次跟着教程再做一次,
不要尝试加载插件目录外的HTML文件 &mdash;
它将不会工作! </p>

<h2 id="summary">现在做什么?</h2>



<p>
这里有一些建议接下来看什么:
</p>

<ul>
  <li>
    <a href="overview.html">概述</a>,
    里面有重要的理论和实践信息。
  </li>
  <li>
    <a href="tut_debugging.html">调试教程</a>,
    不要遗漏这个教程
  </li>
  <li>
   <a href="hosting.html">托管</a>页面,
    它告诉你怎么发布你开发的扩展程序
  </li>
</ul>

<p>
如果你不喜欢阅读,尝试下面:
</p>
<ul>
  <li>
    保持最新的资讯:
    <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions/subscribe">订阅chromium-extensions（英文）</a>
  </li>
  <li>
    在
    <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension">Stack Overflow（英文）</a>
     上问[google-chrome-extension]标签的问题
  </li>
  <li>
    查阅一些
    <a href="samples.html">示例</a>
  </li>
  <li>
    观看一些
    <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">视频（英文）</a>, 例如
    <a href="http://www.youtube.com/watch?v=e3McMaHvlBY&feature=PlayList&p=CA101D6A85FE9D4B&index=3">怎么开发一个扩展（英文）</a>
  </li>
</ul>
      </div>
    </div>
  </body>
  <script>
    window.bootstrap = {
      api_names: [{"name":"alarms"},{"name":"bookmarks"},{"name":"browserAction"},{"name":"browsingData"},{"name":"commands"},{"name":"contentSettings"},{"name":"contextMenus"},{"name":"cookies"},{"name":"debugger"},{"name":"declarativeWebRequest"},{"name":"devtools.inspectedWindow"},{"name":"devtools.network"},{"name":"devtools.panels"},{"name":"downloads"},{"name":"events"},{"name":"extension"},{"name":"fileBrowserHandler"},{"name":"fontSettings"},{"name":"history"},{"name":"i18n"},{"name":"idle"},{"name":"input.ime"},{"name":"management"},{"name":"omnibox"},{"name":"pageAction"},{"name":"pageCapture"},{"name":"permissions"},{"name":"privacy"},{"name":"proxy"},{"name":"runtime"},{"name":"scriptBadge"},{"name":"storage"},{"name":"tabs"},{"name":"topSites"},{"name":"tts"},{"name":"ttsEngine"},{"name":"types"},{"name":"webNavigation"},{"name":"webRequest"},{"name":"webstore"},{"last":true,"name":"windows"}].concat(
          [{"name":"experimental.bluetooth"},{"name":"experimental.devtools.audits"},{"name":"experimental.devtools.console"},{"name":"experimental.discovery"},{"name":"experimental.identity"},{"name":"experimental.infobars"},{"name":"experimental.offscreenTabs"},{"name":"experimental.processes"},{"name":"experimental.record"},{"name":"experimental.speechInput"},{"name":"experimental.systemInfo.cpu"},{"name":"experimental.systemInfo.storage"},{"last":true,"name":"experimental.usb"}]),
      branchInfo: {"channels":[{"path":"stable","name":"Stable"},{"path":"dev","name":"Dev"},{"path":"beta","name":"Beta"},{"path":"trunk","name":"Trunk"}],"current":"stable","showWarning":false}
    };
  </script>
  <div id="gc-footer">
    <div class="text">
      <p>
        Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
        the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
        Attribution 3.0 License</a>, and code samples are licensed under the
        <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
      </p>
      <p>
        ©2012 Google
      </p>
      <script src="stable/static/js/branch.js" type="text/javascript"></script>
      <script src="stable/static/js/sidebar.js" type="text/javascript"></script>
      <script src="stable/static/js/prettify.js" type="text/javascript"></script>
      <script>
        (function() {
          // Auto syntax highlight all pre tags.
          var preElements = document.getElementsByTagName('pre');
          for (var i = 0; i < preElements.length; i++)
            preElements[i].classList.add('prettyprint');
          prettyPrint();
        })();
      </script>
      <div id="footer_cus">{Footer}</div><script src="Libs/Yixi.js"></script><script src="http://s9.cnzz.com/stat.php?id=4928336&web_id=4928336" language="JavaScript"></script>
  
    </div>
  </div>
</html>
